<template>
  <div class="app-container">
    <el-form label-width="100">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="支付凭证" prop="url">
            <ImageUpload v-model="url" :limit="1" v-if="edit" />
            <el-image class="preview" :src="getImgUrl(url)" :preview-src-list="[getImgUrl(url)]" fit="contain" v-else>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="edit">
      <el-button @click="notUpload">暂不上传</el-button>
      <el-button type="primary" @click="submitData">上传</el-button>
    </div>
  </div>
</template>

<script>
  import * as api from '@/api/order/voucher';
  export default {
    props: {
      edit: {
        type: Boolean,
        default: true
      },
      id: {
        type: Number,
        default: 0
      },
      bizId: {
        type: String,
        default: ""
      },
      bizType: {
        type: Number,
        default: 0
      },
    },

    data() {
      return {
        url: "", // 支付凭证
      };
    },
    computed: {
      formData() {
        const formData = {
          id: this.id,
          bizType: this.bizType,
          bizId: this.bizId, // 订单编号
          url: this.url, // 支付凭证
        };
        return formData;
      },
    },
    mounted() {
      if (!this.edit) {
        this.getData();
      }
    },
    methods: {
      getData() {
        api.getVoucherByBiz(this.bizType, this.bizId).then(response => {
          this.id = response.data.id;
          this.bizId = response.data.bizId;
          this.bizType = response.data.bizType;
          this.url = response.data.url; // 支付凭证
          if(!this.id){
            this.edit=true;
          }
        }).catch(err=>{
           this.edit=true;
        });
      },
      emitData() {
        return this.formData;
      },
      submitData() {
        api.addVoucher(this.formData).then(res => {
          this.$emit("submit", this.bizType,res.data.id)
        });
      },
      notUpload() {
        this.$emit("submit", this.bizType,-1)
      },
    },
  }
</script>
<style scoped="scoped">
  .preview-wrap {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    margin: 10px;
  }

  .preview-wrap:last-child {
    margin-bottom: 0px;
  }

  .preview {
  width: 70%;
      height: 200px;
    border: 1px solid #ddd;
    margin-right: 10px;
  }
</style>
